---
title: "HeroUI v2.8.0"
description: "TailwindCSS v4, improvements and bug fixes."
date: "2025-07-15"
image: "/blog/v2.8.0.jpg"
tags: ["heroui", "v2.8.0", "release", "tailwind v4", "improvements", "theme"]
author:
  name: "WK Wong"
  username: "@wingkwong"
  link: "https://github.com/wingkwong"
  avatar: "https://avatars.githubusercontent.com/u/35857179?v=4"
---

import closeToast from "@/content/components/toast/close.ts";
import inputLabelPlacement from "@/content/components/input/label-placements.ts";
import selectIsClearable from "@/content/components/select/is-clearable.ts";
import selectEndContent from "@/content/components/select/end-content.ts";
import tableSortIcon from "@/content/components/table/sort-icon.ts";
import customTooltipContent from "@/content/components/slider/custom-tooltip.ts";

<img
  src="/blog/v2.8.0_2x.jpg"
  width={700}
  height={350}
  alt="HeroUI v2.8.0"
  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
/>

HeroUI version **v2.8.0** introduces TailwindCSS v4, improvements and bug fixes.

## What's New in v2.8.0?

- [TailwindCSS v4](#tailwindcss-v4) - Support for TailwindCSS and upgrades to various dependencies.
- [Overlay Enhancement](#overlay-enhancement) - Enhanced overlay and outside interactions across multiple components.
- [Component Enhancement](#component-enhancement) - Enhanced component capabilities.
- [What's Next?](#whats-next) - Upcoming features and improvements
- [Breaking Changes](#breaking-changes) - Important changes that may affect existing implementations
- [Release Changes](#release-changes) - Detailed list of features, documentation updates, bug fixes and enhancements

<Spacer y={4} />

**Upgrade today by using one of the following methods**:

1. Upgrading HeroUI using the `cli`

<PackageManagers
  commands={{
    cli: "heroui upgrade --all",
    npm: "npx heroui-cli@latest upgrade --all",
  }}
/>

2. Upgrading HeroUI using package managers

<PackageManagers
  commands={{
    npm: "npm install @heroui/react@latest",
    pnpm: "pnpm add @heroui/react@latest",
    yarn: "yarn add @heroui/react@latest",
    bun: "bun add @heroui/react@latest",
  }}
/>

<Spacer y={4} />

## TailwindCSS v4

HeroUI is now compatible with TailwindCSS v4. With this update, HeroUI CLI has also been enhanced to support initializing new starter templates pre-configured with TailwindCSS v4. 

To upgrade your existing projects, please refer to [migration guide](/docs/guide/tailwind-v4#migration-steps).

## Overlay Enhancement

The handling of overlay and outside interaction for components such as Popover, Modal, Dropdown, Select, and Tooltip have been improved to ensure consistent dismissal behaviour.

## Component Enhancement

### Toast

- The return type of `addToast` has been changed from `void` to `string` where the returned string value is the unique key value of the newly created toast.
- A new method `closeToast(key: string): void` has been introduced to accept a key value of `string` type and provide a way to close the specific toast with its unique key programmatically.
- The Toast closing order has been updated from Last In, First Out (LIFO) to First In, First Out (FIFO).

<CodeDemo title="Close Toast" files={closeToast} showEditor={false}/>

### Input

The Input component now features a new label placement option `outside-top`. Previously, labels would always remain inside the input field if there was no placeholder. 

The new `outside-top` option ensures that labels are consistently displayed at the top of the input field, regardless of whether a placeholder is present, similar to the existing `outside-left` placement.

<CodeDemo title="Label Placement" files={inputLabelPlacement} />

### Select

Two new properties `isClearable` and `onClear` have been introduced in the Select component. A clear button is visible when a value is slected and a callback function triggered upon clearing the selection for custom handling.

<CodeDemo title="Clearable" files={selectIsClearable} />

`endContent` has been introduced in the Select component.

<CodeDemo title="End Content" files={selectEndContent} />

### Table

The table header previously utilized either a chevron-up or chevron-down icon for sorting, which was not configurable. A new `sortIcon` property has been introduced, allowing users to customize the default sort icon. This icon will only be applied when `allowsSorting` is set to true.

<CodeDemo
  asIframe
  title="Sort Icon"
  resizeEnabled={false}
  displayMode="visible"
  files={tableSortIcon}
  previewHeight="520px"
  iframeSrc="/examples/table/sort-icon"
/>

### Slider

The `getTooltipValue` property has been introduced to customize the content displayed in the tooltip by returning a string or a number from the function. The existing `tooltipValueFormatOptions` prop can be used for additional formatting when number is returned. If `tooltipProps.content` is set, it will take precedence over the value generated by `getTooltipValue`.

<CodeDemo title="Custom Tooltip" files={customTooltipContent} />

## What's Next?

We're excited to share that HeroUI v3 (Alpha) is just around the corner! You are expected to create stunning interfaces with 50% smaller bundle size, lightning-fast native CSS animations, and effortless customization that adapts to your design vision. 

As an Alpha version, we're actively gathering feedback and refining the current components, including Button, Accordion, Avatar, TextArea, Checkbox, and more. Your input is invaluable in shaping the future of the library.

## Breaking Changes

- The component style have been updated to align TailwindCSS v4.
- `loadingIcon` now renames to `loadingComponent` in Toast component

## Release Changes

<Spacer y={1} />

As always, we are incredibly grateful for your continued support and contributions. There are many exciting milestones ahead, and we invite you to join us on this journey.

Special thanks to HeroUI Team members [@winchesHe](https://github.com/winchesHe), [@macci001](https://github.com/macci001), [@Vishvsalvi](https://github.com/Vishvsalvi), and contributors for their contributions to this release.

<Spacer y={6} />

Thanks for reading and happy coding! 🚀

---

## Community

We're excited to see the community adopt HeroUI, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!

<Community />

## Contributing

PRs on HeroUI are always welcome, please see our [contribution guidelines](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.
